<template>
  <div class="demo">
    <div class="demo-title">自定义分页</div>
    <div class="demo-content">
      <Carousel arrows dots-class="slick-dots slick-thumb">
        <template #customPaging="props">
          <a>
            <img :src="getImgUrl(props.i)" />
          </a>
        </template>
        <div v-for="item in 4" :key="item">
          <img :src="getImgUrl(item - 1)" />
        </div>
      </Carousel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Carousel from '@sscd/carousel';
  const baseUrl =
    'https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/';
  const getImgUrl = (i: number) => {
    return `${baseUrl}abstract0${i + 1}.jpg`;
  };
</script>

<style lang="less" scoped>
  .demo-content {
    :deep(.slick-dots) {
      position: relative;
      height: auto;
    }
    :deep(.slick-slide) {
      img {
        border: 5px solid #fff;
        display: block;
        margin: auto;
        max-width: 80%;
      }
    }
    :deep(.slick-arrow) {
      display: none !important;
    }
    :deep(.slick-thumb) {
      bottom: 0px;
      li {
        width: 60px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
          filter: grayscale(100%);
          display: block;
        }
      }
    }
    :deep .slick-thumb li.slick-active img {
      filter: grayscale(0%);
    }
  }
</style>
